<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">基本配置</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">部门管理</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 default-expand-all -->
    <div class="box">
      <div class="el-menu-input">
        <div class="titleBox">
          <div style="display: flex; align-items: center">
            <div class="division"></div>
            <div class="left_title">选择部门</div>
          </div>
          <i
            style="cursor: pointer"
            class="el-icon-refresh"
            @click="treeAxios"
          ></i>
        </div>
        <el-input placeholder="输入关键字进行查询" v-model="filterText">
        </el-input>
        <el-tree
          class="el-menu-vertical-demo"
          :data="departmentList"
          ref="tree"
          :props="defaultProps"
          :highlight-current="true"
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
        ></el-tree>
      </div>
      <div class="inquiryTab">
        <div class="titleBox">
          <div class="division"></div>
          <div class="left_title">部门列表</div>
        </div>
        <div class="table">
          <el-table
            border
            :header-cell-style="{ background: '#f8f8f8' }"
            :data="tableData"
            style="width: 100%"
            align="center"
          >
            <el-table-column label="部门名称" prop="orgName"> </el-table-column>
            <el-table-column label="部门编号" prop="orgCode"> </el-table-column>
            <el-table-column label="部门成员">
              <template slot-scope="props">
                <p
                  class="pointer"
                  @click="staffDetails(props.row)"
                  :style="{ color: props.row.status == 'S' ? 'red' : '' }"
                >
                  {{ props.row.peopleCount }}
                </p>
              </template>
            </el-table-column>
            <el-table-column label="组织类型" prop="phoneNumber">
              <template slot-scope="props" v-if="dictionariesList.length > 0">
                <el-select
                  v-model="props.row.type"
                  placeholder="请选择"
                  @change="org(props.row)"
                >
                  <el-option
                    v-for="item in dictionariesList"
                    :key="item.dictId"
                    :label="item.dictName"
                    :value="item.dictId"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="更新时间"
              prop="updatedTime"
              width="300"
            ></el-table-column>
            <el-table-column label="状态" prop="status">
              <template slot-scope="props">
                <p
                  :style="{
                    color:
                      props.row.status == 'S'
                        ? 'red'
                        : '' || props.row.status == 'A'
                        ? '#67C23A'
                        : '' || props.row.status == 'X'
                        ? '#999999'
                        : '',
                  }"
                >
                  {{ props.row.statusName }}
                </p>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页start -->
      <div class="page" v-if="totalNum > 0">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum"
            prev-text="上一页"
            next-text="下一页"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 分页end -->
      <!--                                弹框                                       -->
      <el-dialog
        title="部门成员"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="45%"
        :before-close="handleClose"
      >
        <div class="dialogtable">
          <el-table
            align="center"
            :data="dialogDateList"
            :header-cell-style="{ background: '#f8f8f8' }"
            style="width: 100%"
          >
            <el-table-column label="姓名" min-width="100" prop="name">
            </el-table-column>
            <el-table-column label="手机号" min-width="100" prop="phoneNumber">
            </el-table-column>
            <el-table-column label="角色" min-width="100">
              <template slot-scope="props">
                <span>{{ props.row.roleNameList.toString() }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页start -->
          <div class="pageDialog" v-if="totalNum > 0">
            <div class="block">
              <el-pagination
                @size-change="handleDialogSizeChange"
                @current-change="handleDialogCurrentChange"
                :current-page="pageNoDialog"
                :page-sizes="[10, 20, 50, 100, 200]"
                :page-size="pageSizeDialog"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dialogTotalNum"
                prev-text="上一页"
                next-text="下一页"
              >
              </el-pagination>
            </div>
          </div>
          <!-- 分页end -->
        </div>
      </el-dialog>
      <!--                                弹框                                       -->
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    },
  },
  data () {
    return {
      dialogVisible: false,
      filterText: "",
      formInline: {
        name: "",
      },
      departmentList: [],
      tableData: [],
      team: {
        name: "",
        code: "",
        resonse: "",
        sortNo: "",
        type: "",
        switchValue: "A", //A-启用 S-禁用
      },
      defaultProps: {
        children: 'children',
        label: 'orgName'
      },
      parentCode: "",
      parent: "",
      if_parent: false,
      orgName: "",
      id: "",
      data: "",
      if_code: true,
      event: 1, //0修改 1新增
      delect: false, //标识删除是否返回数据
      limits: "",
      parArray: [],
      teamType: [],
      pageSizeDialog: 10,
      pageNoDialog: 1,
      pageSize: 10,
      pageNo: 1,
      totalNum: "",
      orgCode: "",
      dictionariesList: [],//数据字典
      orgtype: "4",//组织类型ID
      dialogDateList: [],//弹框数据
      dialogTotalNum: null,//弹框表格分页数量
      dialogId: "",//弹框内表格数据需要的orgcode
    }
  },
  created () {
    this.treeAxios();
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem('limit'));
    const params = this.limits.buttonTreeDto.filter(item => item.menuCode === "teamCode");
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code)
    })
    // 权限设定判断
  },


  methods: {
    // 表格中下拉框选项触发
    org (e) {
      console.log(e)
      const data = {
        id: e.id,
        type: e.type
      }
      this.$api.orgUpdateType(data).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.$message.success("修改成功")
        } else {
          this.$message.error("修改失败！")
        }
      })
    },
    // 部门成员列表点击事件
    staffDetails (row) {
      console.log(row)
      this.dialogId = row.orgCode
      this.dialogVisible = true
      this.getDialogDateList(row.orgCode)
      console.log(this.dialogDateList)
    },
    getDialogDateList (id) {
      const data = {
        orgId: id,
        pageNo: this.pageNoDialog,
        pageSize: this.pageSizeDialog
      }
      this.$api.orgEmployeeList(data).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.dialogDateList = res.data.list
          this.dialogTotalNum = res.data.totalNum
        }
      })
    },

    // 弹框关闭
    handleClose () {
      this.dialogVisible = false;
      this.pageNoDialog = 1
    },
    filterNode (value, data) {
      if (!value) return true;
      return data.orgName.indexOf(value) !== -1;
    },
    handleNodeClick (data) {
      console.log(data);
      this.orgCode = data.orgCode;
      this.staiffList(data.orgCode);
    },
    // 分页
    handleCurrentChange (val) {
      this.pageNo = val;
      console.log(val)
      this.staiffList(this.orgCode);
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.staiffList(this.orgCode);
    },
    handleDialogSizeChange (val) {
      console.log(val)
      this.pageSizeDialog = val
      this.getDialogDateList(this.dialogId)
    },
    handleDialogCurrentChange (val) {
      console.log(val)
      this.pageNoDialog = val
      this.getDialogDateList(this.dialogId)
    },
    // 分页结束
    //**数据请求**//
    treeAxios () {
      const data = {
        orgName: "",
        status: "",
      }
      this.$api.orgTree(data).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.departmentList = res.data;
          this.orgName = res.data[0].orgName;
          this.if_code = false;
          this.staiffList(res.data[0].orgCode)
        }
      })

    },
    gitDictionaries () {
      const params = {
        groupId: "org_type"
      }
      this.$api.dictionaries(params).then(res => {
        console.log(res, "数据字典")
        this.dictionariesList = res.data
        console.log(this.dictionariesList, 2);
      })
    },
    //**数据请求**//
    /***员工列表***/
    staiffList (e) {
      const data = {
        orgId: e,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$api.orgPageList(data)
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.tableData = res.data.list;
            this.totalNum = res.data.totalNum
            this.gitDictionaries()
          } else {
            this.$message.error(res.message);
          }
        });
    },



  }
}
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.div3 {
  margin-left: -8px;
  background: url(../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.el-menu-vertical-demo {
  width: 200px;
  overflow-y: scroll;
  height: 700px;
}
.el-menu-vertical-demo::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/deep/.el-input__icon {
  line-height: 30px;
}

.box {
  display: flex;
  justify-content: flex-start;

  .table_tab {
    margin-left: 20px;
    width: 90%;
  }
}

.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.demo-form-inline {
  margin-top: 10px;
}

/deep/.el-input__inner {
  height: 30px;
  line-height: 30px;
}
.el-menu-input {
  padding: 0 15px;
  background: #fff;

  /deep/ .el-input__inner {
    width: 100%;
    height: 30px;
    border: 1px solid #eee;
    margin: 10px 0;
  }
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 8px;
    .division {
      width: 4px;
      height: 16px;
      background: #4c81eb;
      opacity: 1;
      margin-right: 10px;
    }
    .left_title {
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      opacity: 1;
    }
  }
}
.table {
  margin-top: 10px;
  border-radius: 0;

  /deep/ .el-input--suffix .el-input__inner {
    box-shadow: none;
  }

  /deep/ .el-button {
    padding: 10px 13px;
  }
}
.inquiryTab {
  width: 84%;
  margin-left: 20px;
  background: #fff;
  padding: 10px 20px 20px 20px;
  border-radius: 5px;

  .el-form {
    margin-top: 10px;
  }
  .titleBox {
    display: flex;

    align-items: center;
    margin-top: 10px;
    margin-bottom: 18px;
    .division {
      width: 4px;
      height: 16px;
      background: #4c81eb;
      opacity: 1;
      margin-right: 10px;
    }
    .left_title {
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      opacity: 1;
    }
  }
}
/deep/.pointer {
  cursor: pointer;
  color: #4c81eb;
}
/deep/.el-dialog {
  border-radius: 10px;
}
.page {
  background-color: #f8f8f8;
  padding-right: 20px;
  text-align: right;
  width: 98%;
  position: fixed;
  bottom: 0px;
  right: 0;
  z-index: 100;

  span {
    font-size: 15px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input--suffix .el-input__inner {
    background: #fff;
    color: #000;
    width: 104px;
    box-shadow: none;
  }
}
/deep/.el-dialog__header {
  border-bottom: 1px solid #d9d9d9;
  padding: 15px 25px 15px;
}
/deep/.el-dialog__title {
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  opacity: 1;
}
/deep/.el-dialog__body {
  padding: 20px 25px;
}
.pageDialog {
  margin-top: 20px;
  display: flex;
  justify-content: right;
}

/deep/ .el-table {
  border: 1px solid #e8eaec;
}
/deep/.el-table thead {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 22px;
  color: #333333;
  opacity: 1;
}
.dialogtable {
  /deep/.el-table .el-table__cell {
    text-align: center;
  }
}
</style>
